<template>
    <el-container>
    <el-header>
      <TopBar />
  </el-header>
  <el-main class="el-main">
    <div class="content">
      <h2 class="page-title">最新动态</h2>
      <div class="post-waterfall-wrapper">
        <PostWaterfall
          ref="postWaterfall"
          :posts="posts"
          sortBy="createdAt"
          sortOrder="desc"
          :columns="0"
          :hasMore="hasMorePosts"
          @post-click="openPostDetail"
          @load-more="loadMorePosts"
        />
      </div>
    </div>
    <PostDetailModal v-if="selectedPost" :post="selectedPost" @close="selectedPost = null" />
  </el-main>
</el-container>
</template>

<script setup>
import NavBar from '../components/NavBar.vue'
import TopBar from '../components/TopBar.vue'
import { ref, onMounted, nextTick } from 'vue'
import PostDetailModal from '../components/PostDetailModal.vue'
import PostWaterfall from '../components/PostWaterfall.vue'
import axios from 'axios'

const selectedPost = ref(null);
const posts = ref([]);
const postWaterfall = ref(null);
const currentPage = ref(0);
const pageSize = ref(20);
const hasMorePosts = ref(true);
const isLoading = ref(false);

function openPostDetail(post) {
  selectedPost.value = post;
}

// 初始加载帖子
async function loadPosts(isInitial = false) {
  if (isLoading.value) return;

  try {
    isLoading.value = true;

    // 如果是初始加载，重置状态
    if (isInitial) {
      currentPage.value = 0;
      posts.value = [];
      hasMorePosts.value = true;
    }

    const skip = currentPage.value * pageSize.value;
    const response = await axios.get('http://localhost:5000/posts', {
      params: {
        skip,
        limit: pageSize.value
      }
    });

    // 将新帖子添加到现有帖子列表中
    const newPosts = response.data;
    posts.value = [...posts.value, ...newPosts];

    // 检查是否还有更多帖子
    hasMorePosts.value = newPosts.length === pageSize.value;

    // 如果没有获取到任何帖子（包括初始加载），设置 hasMorePosts 为 false
    if (newPosts.length === 0) {
      hasMorePosts.value = false;
    }

    // 增加页码
    currentPage.value++;

    console.log('获取帖子成功:', newPosts);

    // 在数据加载后，重新计算瀑布流布局
    nextTick(() => {
      if (postWaterfall.value) {
        setTimeout(() => {
          postWaterfall.value.calculateColumns();
          postWaterfall.value.resizeAllWaterfallItems();
          // 重置加载状态
          postWaterfall.value.resetLoadingState();
        }, 200);
      }
    });
  } catch (error) {
    console.error('获取帖子失败:', error);
    hasMorePosts.value = false;
  } finally {
    isLoading.value = false;
  }
}

// 加载更多帖子的方法 - 由 PostWaterfall 组件的 @load-more 事件触发
function loadMorePosts() {
  if (!hasMorePosts.value || isLoading.value) return;
  loadPosts();
}

// 使用onMounted钩子初始加载帖子数据
onMounted(async () => {
  await loadPosts(true);
});
</script>

<style>
body {
  background-color: #1f1b24;
  margin: 0;
  padding: 0;
}
::-webkit-scrollbar{
  display: none;
}
</style>

<style scoped>
.content {
  position: absolute;
  top: 60px;
  left: 10vw;
  right: 10vw;
  bottom: 0;
  padding: 20px;
  overflow-y: auto;
}

.post-waterfall-wrapper {
  width: 100%;
}

.page-title {
  color: #ffffff;
  font-size: 28px;
  margin: 0 0 30px 0;
  font-weight: 600;
  position: relative;
  padding-bottom: 10px;
}

.page-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(45deg, #3f51b5, #2196f3);
  border-radius: 3px;
}

/* 响应式布局 */
@media (max-width: 699px) {
  .content {
    left: 5vw;
    right: 5vw;
  }
}
</style>

<script>
export default {
  // 保留这个空的选项对象，因为可能会在将来需要扩展
}
</script>
